<template>
	<div>

		<div class="app-container">
			<TopInfo />

			<Search :lookup="data.lookup" @investigate="inves" />

			<div>
				<el-button type="primary" @click="add">{{ $t('system.wechat.add') }}</el-button>
			</div>

		</div>

		<div class="app-container" v-loading="data.mtloading">

			<el-table :data="data.list" :header-cell-style="{ 'text-align': 'center' }"
				:cell-style="{ 'text-align': 'center' }" class="w-full">
				<el-table-column prop="id" label="ID" show-overflow-tooltip />
				<el-table-column prop="gh_id" :label="$t('system.wechat.id')" show-overflow-tooltip>
					<template #default="scope">
						{{ scope.row.gh_id || '--' }}
					</template>
				</el-table-column>

				<el-table-column prop="wx_name" :label="$t('system.wechat.name')" show-overflow-tooltip>
					<template #default="scope">
						{{ scope.row.wx_name || '--' }}
					</template>
				</el-table-column>

				<el-table-column prop="app_id" label="APP_ID" show-overflow-tooltip>
					<template #default="scope">
						{{ scope.row.app_id || '--' }}
					</template>
				</el-table-column>

				<el-table-column prop="secret" :label="$t('strategy.payee.secretKey')" show-overflow-tooltip>
					<template #default="scope">
						{{ scope.row.secret || '--' }}
					</template>
				</el-table-column>

				<el-table-column prop="token" :label="$t('system.wechat.token')" show-overflow-tooltip>
					<template #default="scope">
						{{ scope.row.token || '--' }}
					</template>
				</el-table-column>

				<el-table-column prop="aes_key" :label="$t('system.wechat.key')" show-overflow-tooltip>
					<template #default="scope">
						{{ scope.row.aes_key || '--' }}
					</template>
				</el-table-column>

				<el-table-column prop="status" :label="$t('public.state')">
					<template #default="scope">
						<el-tag v-if="scope.row.status == 1" type="success">{{ $t('public.enable') }}</el-tag>
						<el-tag v-if="scope.row.status == 2" type="danger">{{ $t('public.disable') }}</el-tag>
					</template>
				</el-table-column>

				<el-table-column prop="ao_id" :label="$t('machine.infos.organiz')" show-overflow-tooltip width="120">
					<template #default="scope">
						{{ getaoid(scope.row.ao_id) }}
					</template>
				</el-table-column>

				<el-table-column prop="create_time" :label="$t('date.createTime')" show-overflow-tooltip>
					<template #default="scope">
						{{ getPlevel.gettime(scope.row.create_time, 3) }}
					</template>
				</el-table-column>

				<el-table-column :label="$t('machine.configs.QRcode')">
					<template #default="scope">
						<el-button v-prmis="'wx_official_getQrCode'" size="small" type="success"
							@click="getcode(scope.row.id)">{{ $t('machine.configs.QRcode') }}</el-button>
					</template>
				</el-table-column>

				<el-table-column :label="$t('public.operate')" width="220">
					<template #default="scope">
						<el-button size="small" type="success" @click="getTemplate(scope.row.id)">{{
							$t('public.template') }}</el-button>
						<el-button size="small" type="primary" @click="modify(scope.row)">{{ $t('public.modify')
							}}</el-button>
						<el-button v-prmis="'wx_official_del'" size="small" type="danger" @click="del(scope.row.id)">{{
							$t('public.del')}}</el-button>
					</template>
				</el-table-column>

			</el-table>

			<PageNum :total="data.total" :page="data.wxinfo" @exposeData="current" @fraction="fraction" />

		</div>

		<el-dialog v-model="data.vodesing" width="30%">
			<div class="flex justify-center">
				<el-image class="max-w-60" :src="data.img_url" fit="fill" />
			</div>
		</el-dialog>

	</div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
const { t: $t } = useI18n()
import TopInfo from '@/components/TopInfo/index.vue';
import Search from '@/components/Search/index.vue';
import PageNum from '@/components/PageNum/index.vue';
import getPlevel from '@/utils/level'
import arrange from '@/utils/hierarchy';
import { getwxList, delwx, getwxQrCode } from '@/api/system';
import { useRouter } from "vue-router";
const router = useRouter()
let data = reactive({
	mtloading: false, // 加载
	vodesing: false, // 弹窗
	lookup: [ // 筛选栏
		{ title: $t('machine.infos.organiz'), type: 'define', select: [], value: '', key: 'ao_id' },
		{ title: $t('system.wechat.wechat'), type: 'input', value: '', key: 'wx_name' },
		{ title: $t('system.message.official') + ' appid', type: 'input', value: '', key: 'app_id' },
	],
	aolist: [],
	wxinfo: { // 筛选数据
		ao_id: '',
		wx_name: '',
		app_id: '',
		page: 1,
		pageNum: 15
	},
	total: 0, // 总条数
	img_url: '', // 二维码链接
})

// 查询公众号列表
let getlist = () => {
	data.mtloading = true
	getwxList(data.wxinfo).then(res => {
		data.mtloading = false
		if (res.state == 200) {
			data.list = res.data.data
			data.total = res.data.total
		}
	})
}

// 获取接口信息
let geturl = async () => {
	let array = await arrange.arrange(1);
	for (let item of data.lookup) {
		if (item.key == 'ao_id') {
			item.select = []
			data.aolist = []
			for (let ime of array) {
				item.select.push({
					label: ime.ao_id + ' - ' + ime.organization_name,
					value: ime.ao_id
				})
				data.aolist.push({
					label: ime.organization_name,
					value: ime.ao_id
				})
			}
		}
	}
}

// 组织架构名称
let getaoid = (e) => {
	let name = '--'
	for (let item of data.aolist) {
		if (item.value == e) {
			name = item.label
		}
	}
	return name
}

// 查询回调
let inves = (e) => {
	for (let key in e) {
		data.wxinfo[key] = e[key]
	}
	data.wxinfo.page = 1
	data.wxinfo.pageNum = 15
	getlist()
}

// 添加公众号
let add = () => {
	router.push({ path: '/system/wechat/add_info/index' })
}

// 修改公众号
let modify = (e) => {
	let query = {
		l: encodeURI(JSON.stringify({
			info: e
		}))
	}
	router.push({ path: '/system/wechat/details_info/index', query: query })
}

// 删除公众号
let del = (e) => {
	ElMessageBox.confirm($t('message.delDatas'))
		.then(res => {
			delwx({ id: e }).then(res => {
				if (res.state == 200) {
					ElMessage({
						message: $t('message.delSuccess'),
						type: 'success'
					})
					getlist()
					return
				}
				ElMessage({
					message: $t('message.networkFailed'),
					type: 'error'
				})
			})

		}).catch(err => {
			console.log('取消')
		})
}

// 获取二维码
let getcode = (e) => {
	data.img_url = ''
	data.vodesing = true
	getwxQrCode({ id: e }).then(res => {
		if (res.state == 200) {
			data.img_url = res.data
		}
	})
}

// 跳转模板
let getTemplate = (e) => {
	let query = {
		id: e
	}
	router.push({ path: '/system/message/index', query })
}

// 页数回调
let current = (e) => {
	data.wxinfo.page = e
	getlist()
}

// 条数回调
let fraction = (e) => {
	data.wxinfo.pageNum = e
	getlist()
}

geturl()
getlist()

</script>